<template>
  <div>
    <div class="fooddetails-food-panel-0"><span class="fooddetails-food-img-0 fooddetails-hasShadow"><img :src="food.image_path|foodImgFormat"></span>
      <section class="fooddetails-food-info-0">
        <header class="fooddetails-food-title"><span v-text="food.name">金枕榴梿比萨</span></header>
        <p class="fooddetails-food-description" v-text="food.description">精选泰国原产地自然成熟的金枕榴梿，马苏里拉芝士</p>
        <p class="fooddetails-food-sales-0"><span>月售{{food.month_sales}}份</span> <span>好评率{{food.satisfy_rate}}%</span></p>
        <strong class="fooddetails-food-price-0">
          <span>{{price}}</span>
          <span class="fooddetails-food-price-lowest" v-if="food.specfoods.length > 1">起</span>
          <del class="fooddetails-food-price-origin" v-if="food.specfoods[0].original_price">¥{{food.specfoods[0].original_price}}</del>
        </strong>
        <div class="fooddetails-cart-button-0"><CartCounter :food="food" @chooseSpec = "chooseSpec"></CartCounter></div>
      </section>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import CartCounter from './CartCounter.vue';
  export default{
      name: 'FoodItem',
      data () {
          return {}
      },
    props: {
      food: {
        type: Object
      }
    },
    methods: {
      chooseSpec: function (food) {
        this.$emit('chooseSpec', this.food);
      }
    },
    filters: {
      foodImgFormat: function (value) {
        return 'https://fuss10.elemecdn.com/' + value.charAt(0) + '/' + value.substr(1, 2) + '/' + value.slice(3) + '.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/'
      }
    },
    computed: {
      price () {
        if (this.food.specfoods.length > 0) {
          let minPrice = this.food.specfoods[0].price;
          for (let i = 1; i < this.food.specfoods.length; i++) {
            let tmpPrice = this.food.specfoods[i].price;
            if (tmpPrice < minPrice) {
              minPrice = tmpPrice
            }
          }
          return minPrice
        } else {
          return this.food.specfoods[0].price
        }
      }
    },
    components: {
      CartCounter
    }
  }
</script>

<style>

</style>
